<template>
  <div :class="show?'showpic':'file'" >
    <span v-if="!show" class="filename">{{decodeURIComponent(file.fileName)}}</span>
    <span v-if="!show&&!file.upload" class="error">文件格式有误</span>
    <span v-if="!show" class="filedel"><i class="el-icon-upload-success el-icon-circle-check"></i><i class="el-icon-close" @click="filedelete"></i></span>
    <div class="showpicdiv">
      <img v-if="show" :src="file.content" alt="" />
      <div v-if="show" class="imgbg">
        <i class="el-icon-delete2" @click="filedelete"></i>
      </div>     
    </div>
  </div>
</template>
<script type="text/ecmascript-6">
  export default {
    props: {
      file: {
        type: Object
      },
      fileName: {
        type: String
      },
      content: {
        type: String
      },
      index: {
        type: Number
      },
      show: {
        type: Boolean,
        default: false
      }
    },
    data () {
      return {
      }
    },
    mounted () {
    //   alert(this.fileName)
    },
    methods: {
      filedelete () {
        this.$emit('listenToChildEvent', this.index)
      }
    }
  }
</script>
<style lang="stylus" rel="stylesheet/stylus">
.file
  width:400px;
  overflow:hidden;
  padding:5px;
  .filename
    display:inline-block;
    float:left;
  .filedel
    display:inline-block;
    float:right;  
    color:#00ff00;  
    .el-icon-close
      display:none;
  .error
    float:right;  
    display:inline-block;
    color:#ff3e3e;
    padding-left:10px;
    font-size:12px;
.file:hover
  color:#20a0ff;
  background:#ececec;
  border-radius:2px;
  cursor:pointer; 
  .filedel
    display:inline-block;
    float:right;  
    color:#00ff00; 
    .el-icon-close
      color:#000000;
      transform: scale(.7);
      display:block;
    .el-icon-upload-success
      display:none;
.showpic
  width:180px;
  height:180px;
  margin-right:10px;
  margin-bottom:10px;
  float:left;
  .showpicdiv
    position:relative
    img
      width:180px;
      height:180px;  
      border-radius: 8px;
      border:1px dotted #c0c0c0;
    .imgbg
      position:absolute;
      top:0px;
      left:0px;
      width:180px;
      height:180px;  
      line-height:180px;
      color:#ffffff;
      font-size:25px;
      text-align:center;
      background:#000000;
      opacity:0.5;
      display:none;
      border-radius: 8px;
  .showpicdiv:hover 
    .imgbg
      display:block;
      cursor:pointer; 
      i
        opacity:1;
        cursor:pointer;
</style>
